<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>学科交叉分析</title>
    <!-- LOADING STYLESHEETS -->
    <script src="js/echarts.min.js"></script>
    <script src="js/dataTool.min.js"></script>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>

<body>

<div class="container-fluid">
    <div class="navigation">
        <div class="row">
            <ul class="topnav">
                <li></li>
                <li>
                    <a href="/scidata/team">
                        <i class="fa fa-search-plus"></i>科研团队识别</a>
                </li>
                <li>
                    <a href="/scidata/project/all">
                        <i class="fa fa-location-arrow"></i>项目成果追踪</a>
                </li>
                <li>
                    <a href="/scidata/paper">
                        <i class="fa fa-book"></i>学科交叉分析</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- END TOP NAVIGATION -->
<!-- SEARCH FIELD AREA -->
<div class="searchfield bg-hed-six">
    <div class="container" style="padding-top: 20px; padding-bottom: 20px;">
        <div class="row text-center margin-bottom-20">
            <h1 class="white">学科交叉分析</h1>
        </div>
        <br>
        <div class="row search-row">
            <input id="searchword" type="text" class="search" placeholder='${mcurname}'>
            <button class="buttonsearch btn btn-info btn-lg" onclick="search('${lang}')">搜索</button>
        </div>
    </div>
    <#--        <div class="col-lg-offset-3">-->
    <#--            <div class="fb-heading-small">-->
    <#--                按照时间分类-->
    <#--            </div>-->
    <#--            <hr class="style-three">-->
    <#--            <div class="fat-content-small padding-left-10">-->
    <#--                <label>-->
    <#--                    <input type="month" class="art-date" id="time" onchange="filterTime(this)">-->
    <#--                </label>-->
    <#--            </div>-->
    <#--        </div>-->
</div>

<!-- END SEARCH FIELD AREA -->
<!-- MAIN SECTION -->
<div class="featured-area-default padding-30">
    <div class="row">

    </div>
    <div class="row">
<#--        左侧边栏-->
        <div class="col-md-2 padding-10" style="background-color: #ffffff">
            <h4 class="card-title" id="cardsub"
                style="font-size: large; font-weight: 700">论文成果总量：${total}</h4>
            <ul class="nav justify-content-center" id="subbar">
                <#list clfys as clf>
                    <button type="button" class="${(clf.id==mid)?string('btn btn-primary','btn btn-primary btn-link')}"
                            onclick="geturl('${clf.classify_name}',${clf.id?c})" id="${clf.id?c}"
                            style="font-size: medium;font-weight: 400">
                        ${clf.classify_name}(${clf.nums})
                    </button>
                    <br>
                </#list>
            </ul>
        </div>
        <div class="col-md-6 padding-10">
            <div class="card">
                <div class="card-header card-header-text card-header-info">
                    <div class="card-text">
                        <h4 class="card-title" id="subject"
                            style="font-size: large; font-weight: 700">${clfys[0].getClassify_name()}</h4>
                    </div>
                </div>
<#--                <div class="btn-group" id="lang_button" role="group" aria-label="..." >-->
<#--                    <button type="button" class="${(lang == 'CN')?string('btn btn-primary','btn btn-default')}" id="CN" onclick=changeLang('CN')>中文</button>-->
<#--                    <button type="button" class="${(lang == 'EN')?string('btn btn-primary','btn btn-default')}" id="EN" onclick=changeLang('EN')>英文</button>-->
<#--                </div>-->
                <div class="tip_txt"></div>
                <br>
                <div class="card-body" id="content_table">
                    <ul class="nav nav-pills nav-pills-info" role="tablist">
                        <li class="nav-item active">
                            <a class="nav-link active" data-toggle="tab" href="#link1" role="tablist"
                               aria-expanded="true" style="font-size: large">
                                论文
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#link2" role="tablist" aria-expanded="false"
                               style="font-size: large">
                                项目
                            </a>
                        </li>
<#--                        <li class="nav-item">-->
<#--                            <a class="nav-link" data-toggle="tab" href="#link3" role="tablist" aria-expanded="false"-->
<#--                               style="font-size: large">-->
<#--                                资讯-->
<#--                            </a>-->
<#--                        </li>-->
                    </ul>
                    <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
                    <div class="tab-content tab-space">
                        <div class="tab-pane active" id="link1" aria-expanded="true">
                            <div class="btn-group" id="lang_button" role="group" aria-label="..." >
                                <button type="button" class="${(lang == 'CN')?string('btn btn-primary','btn btn-default')}" id="CN" onclick=changeLang('CN')>中文</button>
                                <button type="button" class="${(lang == 'EN')?string('btn btn-primary','btn btn-default')}" id="EN" onclick=changeLang('EN')>英文</button>
                            </div>
                            <div class="col-md-12 " style="margin-top: 1rem">

                                <label class="sort">
                                    <select onchange="filterSort(this)">
                                        <option id="zonghe" value="zonghe" >综合排序</option>
                                        <option id="relate" value="relate" >按相关度排序</option>
                                        <option id="quote" value="quote" >按被引量排序</option>
                                        <option id="time" value="time" >按时间排序</option>
                                    </select>
                                </label>
                                <div class="row" id="papertable">
                                </div>
                                <nav class="text-center" id='page_nav_area'>
                                </nav>

                            </div>


                        </div>
                        <div class="tab-pane" id="link2" aria-expanded="false">
                            <div class="col-md-12 " style="margin-top: 1rem">
                                <table class="table" style="table-layout:fixed" id="fundtable">
                                    <thead class=" text-info">
                                    <th style="width: 5%;font-size: small">序号</th>
                                    <th style="width: 30%;font-size: small">项目名称</th>
                                    <th style="width: 10%;font-size: small">项目编号</th>
                                    <th style="width: 10%;font-size: small">资助金额</th>
                                    <th style="width: 25%;font-size: small">项目类型</th>
                                    <th style="width: 10%;font-size: small">开始时间</th>
                                    <th style="width: 10%;font-size: small">结束时间</th>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                                <nav class="text-center" id='fundpage_nav_area'>
                                </nav>

                            </div>

                        </div>
<#--                        <div class="tab-pane" id="link3" aria-expanded="false">-->
<#--                            <div class="col-md-12 " style="margin-top: 1rem">-->
<#--                                <div class="row" id="papertable">-->
<#--                                    <table class="table" style="table-layout:fixed" id="newstable">-->
<#--                                        <thead class=" text-info">-->
<#--                                        <th style="width: 5%; font-size: large">序号</th>-->
<#--                                        <th style="width: 70%;font-size: large">新闻标题</th>-->
<#--                                        <th style='font-size: large'>发布时间</th>-->
<#--                                        &lt;#&ndash;                            <th>基金编号</th>&ndash;&gt;-->
<#--                                        &lt;#&ndash;                            <th>资助金额</th>&ndash;&gt;-->
<#--                                        &lt;#&ndash;                            <th>基金类型</th>&ndash;&gt;-->
<#--                                        </thead>-->
<#--                                        <tbody>-->
<#--                                        </tbody>-->
<#--                                    </table>-->
<#--                                    <nav class="text-center" id='newspage_nav_area'>-->
<#--                                    </nav>-->
<#--                                    <script type="text/javascript">-->
<#--                                        //定义全局变量，总记录数-->
<#--                                        // var totalRecord,currentPage;-->
<#--                                        //页面加载完成以后，直接去发送ajax请求，要到分页数据-->
<#--                                        $(function () {-->
<#--                                            //页面加载完默认进首页-->
<#--                                            to_page2(1);-->
<#--                                        });-->

<#--                                        //点击页面时，实现页码跳转-->
<#--                                        function to_page2(pn) {-->
<#--                                            $.ajax({-->
<#--                                                url: newsurl + pn,-->
<#--                                                // data:"pn="+pn,//pn是用户指定跳转的页码数-->
<#--                                                type: "get",-->
<#--                                                //请求成功的回调函数，result是服务器响应给浏览器的数据-->
<#--                                                success: function (result) {-->
<#--                                                    //console.log(result);//需要在浏览器的控制台中查看-->
<#--                                                    //1.解析并显示员工数据-->
<#--                                                    build_emps_table2(result);-->
<#--                                                    //2.解析并显示分页信息-->
<#--                                                    build_page_info2(result);-->
<#--                                                    //3.解析显示分页条-->
<#--                                                    build_page_nav2(result);-->
<#--                                                }-->
<#--                                            });-->
<#--                                        }-->

<#--                                        function build_emps_table2(result) {-->
<#--                                            //清空table表格-->
<#--                                            $("#newstable tbody").empty();-->
<#--                                            //获取json串中返回的结果集（库表中的数据）-->
<#--                                            var emps = result.list;-->
<#--                                            //循环遍历结果集==>循环遍历所有员工数据-->
<#--                                            //参数1：要遍历的emps集合，参数2:每次遍历的回调函数-->
<#--                                            //回调函数：参数1：索引，参数2：当前对象-->
<#--                                            $.each(emps, function (index, item) {-->
<#--                                                //alert(item.empName);-->
<#--                                                //把解析的数据放到表格中展示，以下的DOM解析表格-->
<#--                                                var empIdTd = $("<td style='font-size: large'></td>").append(result.startRow + index);-->
<#--                                                var url = "/paper/" + item.url;-->
<#--                                                var content = $("<a></a>").append(item.title).attr("href", url);-->
<#--                                                var empNameTd = $("<td style='font-size: large'></td>").append(content);-->
<#--                                                var timeTd = $("<td style='font-size: large'</td>").append(item.date);-->


<#--                                                $("<tr ></tr>").append(empIdTd).append(empNameTd).append(timeTd)-->
<#--                                                    .appendTo("#newstable tbody");-->
<#--                                            });-->
<#--                                        }-->

<#--                                        //解析显示分页信息-->
<#--                                        function build_page_info2(result) {-->
<#--                                            //清空分页信息-->
<#--                                            // $("#page_info_area").empty();-->
<#--                                            // var h=$("<h5></h5>").append("当前"+result.pageNum+"页，总"+-->
<#--                                            //     result.pages+"页，总"+-->
<#--                                            //     result.total+"条记录");-->
<#--                                            // $("#page_info_area").append(h);-->
<#--                                            totalRecord = result.total;-->
<#--                                            currentPage = result.pageNum;-->
<#--                                        }-->

<#--                                        //解析显示分页条-->
<#--                                        function build_page_nav2(result) {-->
<#--                                            //清空分页导航-->
<#--                                            $("#fundpage_nav_area").empty();-->
<#--                                            //创建ul-->
<#--                                            var ul = $("<ul></ul>").addClass("pagination");-->
<#--                                            //首页-->
<#--                                            // var firstPageLi=$("<li></li>").append($("<a class=\"page-link\"></a>").append("首页").attr("href","#")).addClass("page-item");-->
<#--                                            //前一页-->
<#--                                            var prePageLi;-->
<#--                                            prePageLi = $("<li></li>").append($("<a aria-label=\"Previous\"></a>").append($("<span aria-hidden=\"true\"></span>").append('<i class="fa fa-arrow-circle-left"></i>').append('Previous')));-->
<#--                                            //如果没有了前一页，首页和前一页按钮不可用-->
<#--                                            if (result.hasPreviousPage === false) {-->
<#--                                                prePageLi = $("<li></li>").append($("<a aria-label=\"Previous\"></a>").append($("<span aria-hidden=\"false\"></span>").append('<i class="fa fa-arrow-circle-left"></i>').append('Previous')));-->

<#--                                            }-->
<#--                                            //为元素添加点击翻页事件-->
<#--                                            //首页单击事件-->
<#--                                            // firstPageLi.click(function(){-->
<#--                                            //     to_page(1);-->
<#--                                            // });-->
<#--                                            //上一页单击事件:当前页-1-->
<#--                                            prePageLi.click(function () {-->
<#--                                                to_page2(result.pageNum - 1);-->
<#--                                            });-->

<#--                                            //后一页-->
<#--                                            var nextPageLi-->
<#--                                            nextPageLi = $("<li></li>").append($("<a aria-label=\"Previous\"></a>").append($("<span aria-hidden=\"true\"></span>").append('<i class="fa fa-arrow-circle-right"></i>').append('Next')));-->
<#--                                            //末页-->
<#--                                            // var lastPageLi=$("<li></li>").append($("<a class=\"page-link\"></a>").append("末页").attr("href","#")).addClass("page-item");-->
<#--                                            //如果没有了下一页，末页和下一页按钮不可用-->
<#--                                            if (result.hasNextPage === false) {-->
<#--                                                nextPageLi = $("<li></li>").append($("<a aria-label=\"Previous\"></a>").append($("<span aria-hidden=\"false\"></span>").append('<i class="fa fa-arrow-circle-right"></i>').append('Next')));-->
<#--                                            }-->
<#--                                            //下一页的单击事件：当前页+1-->
<#--                                            nextPageLi.click(function () {-->
<#--                                                to_page2(result.pageNum + 1);-->
<#--                                            });-->
<#--                                            // lastPageLi.click(function(){-->
<#--                                            //     to_page(result.pages);-->
<#--                                            // });-->


<#--                                            //添加首页和前一页的提示-->
<#--                                            ul.append(prePageLi);-->
<#--                                            //循环遍历给ul中添加页码提示，取出页码号 1,2,3,4,5，-->
<#--                                            $.each(result.navigatepageNums, function (index, item) {-->
<#--                                                var numLi = $("<li></li>").append($("<a></a>").append(item).append('<span class="sr-only">(current)</span>'));-->
<#--                                                //如果当前页码等于正在循环遍历的页码，则页码变色-->
<#--                                                if (result.pageNum === item) {-->
<#--                                                    numLi.addClass("active");-->
<#--                                                } else {-->
<#--                                                    numLi.addClass("enabled");-->
<#--                                                }-->
<#--                                                //给页码添加单击事件-->
<#--                                                numLi.click(function () {-->
<#--                                                    to_page2(item);-->
<#--                                                });-->
<#--                                                ul.append(numLi);-->
<#--                                            });-->
<#--                                            //添加下一页和末页的提示-->
<#--                                            ul.append(nextPageLi);-->
<#--                                            //创建nav,将ul标签添加到nav标签中-->
<#--                                            // var nav=$("<nav aria-label=\"Page navigation example\"></nav>").append(ul);-->
<#--                                            //将分页条添加到上面id中-->
<#--                                            ul.appendTo("#newspage_nav_area");-->
<#--                                        }-->

<#--                                    </script>-->
<#--                                </div>-->
<#--                            </div>-->

<#--                        </div>-->
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 padding-10">

            <!-- POPULAR TAGS (SHOW MAX 20 TAGS) -->
            <div class="row margin-top-20">
                <div class="col-md-12">
                    <div class="fb-heading-small" style="font-size: large; font-weight: 700">
                        <#--                            <blockquote class="blockquote text-right">-->
                        <select id="form-s1" class="form-select " aria-label="Default select example"
                                onchange="getid1(this.options[this.options.selectedIndex].text)"
                                aria-label="Default select example">
                            <option selected id="fs1">${keyclf[0].classify_name}</option>
                            <#list keyclf as clf>
                                <option value=${clf.id}>${clf.classify_name}</option>
                            </#list>
                        </select>
                        <#--                    background-color: #00bcd4;-->
                        与
                        <select id="form-s2" class="form-select"
                                onchange="getid2(this.options[this.options.selectedIndex].text)"
                                aria-label="Default select example">
                            <option selected id="fs2">${keyclf[1].classify_name}</option>
                            <#list keyclf as clf>
                                <option value=${clf.id}>${clf.classify_name}</option>
                            </#list>
                        </select>
                        <#--                            </blockquote>-->
                        交叉研究主题趋势预测
                    </div>
                    <div>

                    </div>
                    <div class="fat-content-small padding-left-10">
                        <div id="zhuti" style="width: 100%;height:500px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row margin-top-20">
                <div class="col-md-12">
                    <div class="fb-heading-small" style="font-size: large; font-weight: 700">
                        ${mcurname}关联学科交叉研究主题
                    </div>
                    <div class="fat-content-small padding-left-10">
                        <div id="main3" style="width: 100%;height:500px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row margin-top-20">
                <div class="col-md-12">
                    <div class="fb-heading-small" style="font-size: large; font-weight: 700">
                        ${mcurname}相关学科成果分布
                    </div>
                    <div class="fat-content-small padding-left-10">
                        <div id="main4" style="width: 100%;height:500px;">
                            <script type="text/javascript">
                                var myChart1 = echarts.init(document.getElementById('main4'));
                                myChart1.showLoading();
                                $.ajax({
                                    method: 'get',
                                    url: '/scidata/paper/echartshow2?lang=${lang}' + '&keyName=${mcurname}',
                                    dataType: 'json',
                                    success(result) {
                                        var names = [];
                                        var nums = [];
                                        $.each(result, function (i, obj) {
                                            names.push(obj.name);
                                            nums.push(obj);
                                        });
                                        option = {
                                            title: {
                                                text: '',
                                                subtext: '',
                                                x: 'center'
                                            },
                                            tooltip: {
                                                trigger: 'item',
                                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                                            },
                                            legend: {
                                                orient: 'vertical',
                                                x: 'left',
                                                data: names,
                                                textStyle: {
                                                    fontSize: 15
                                                }
                                            },
                                            toolbox: {
                                                show: true,
                                                feature: {
                                                    mark: {show: true},
                                                    dataView: {show: true, readOnly: false},
                                                    magicType: {
                                                        show: true,
                                                        type: ['pie', 'funnel'],
                                                        option: {
                                                            funnel: {
                                                                x: '25%',
                                                                width: '50%',
                                                                funnelAlign: 'left',
                                                                max: 1548
                                                            }
                                                        }
                                                    },
                                                    restore: {show: true},
                                                    saveAsImage: {show: true}
                                                }
                                            },
                                            calculable: true,
                                            color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
                                            series: [
                                                {
                                                    name: '',
                                                    type: 'pie',
                                                    radius: '55%',
                                                    center: ['50%', '60%'],
                                                    data: nums
                                                }
                                            ]
                                        };
                                        myChart1.hideLoading();
                                        myChart1.setOption(option)
                                    }
                                });
                            </script>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row margin-top-20">
                <div class="col-md-12">
                    <div class="fb-heading-small" style="font-size: large; font-weight: 700">
                        ${mcurname}相关学科趋势
                    </div>
                    <div class="fat-content-small padding-left-10">
                        <div id="qushi" style="width: 100%;height:500px;margin-top: 43px;">

                        </div>
                    </div>
                </div>
            </div>
            <!-- END POPULAR TAGS (SHOW MAX 20 TAGS) -->
        </div>
    </div>
</div>
<!-- END MAIN SECTION -->
<!-- LOADING MAIN JAVASCRIPT -->
<#--    <script src="js/jquery-2.2.4.min.js"></script>-->
<#--交叉关系图-->
<script type="text/javascript">
    getRelation(${mid});
    console.log('${mcurname}')
    var myChart2 = echarts.init(document.getElementById('main3'));
    myChart2.showLoading();
    function getRelation(id) {
        relationurl = '/scidata/paper/echartshow?subid=' + id + '&lang=${lang}' + '&keyName=${mcurname}',
        $.ajax({
            method: 'get',
            url: relationurl,
            dataType: 'json',
            success: function (data) {
                graphdata = [];
                edgedata = [];
                $.each(data, function (i, obj) {
                    var obj1 = {};

                    obj1.name = obj.clfy.classify_name;
                    obj1.id = obj.clfy.id.toString();
                    obj1.symbolSize = 30;
                    if (i === 0) {
                        obj1.category = 1;
                    } else {
                        obj1.category = 0;
                        var clf_key = {};
                        clf_key.source = graphdata[0].id;
                        clf_key.target = obj1.id;
                        edgedata.push(clf_key);
                        $.each(obj.keywords, function (j, keyword) {
                            var keyobj = {};
                            keyobj.name = keyword.keyword_name;
                            keyobj.id = obj.clfy.id.toString() + keyword.id.toString();
                            keyobj.category = 2;
                            keyobj.draggable = true;
                            keyobj.symbolSize = 20;
                            graphdata.push(keyobj);
                            var clf_key = {};
                            clf_key.source = obj.clfy.id.toString();
                            clf_key.target = keyobj.id;
                            edgedata.push(clf_key);
                        });
                    }
                    obj1.draggable = true;
                    graphdata.push(obj1);

                    // console.log(i);
                    // console.log(obj1.category);
                });

                var option = {// 背景颜色
                    tooltip: {                  // 提示框的配置
                    },
                    legend: {
                        x: "center",
                        show: true,
                        data: ["学科", "当前搜索学科", "研究主题"],
                        textStyle: { //图例文字的样式
                            color: '#000000',
                            fontSize: 15
                        }
                    },

                    series: [{
                        type: "graph",          // 系列类型:关系图
                        top: '10%',             // 图表距离容器顶部的距离
                        roam: true,             // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                        focusNodeAdjacency: true,   // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。[ default: false ]
                        force: {                // 力引导布局相关的配置项，力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。
                            repulsion: 100,            // [ default: 50 ]节点之间的斥力因子(关系对象之间的距离)。支持设置成数组表达斥力的范围，
                            edgeLength: [50, 100]      // [ default: 30 ]边的两个节点之间的距离(关系对象连接线两端对
                        },
                        layout: "force",
                        symbolSize: 20,// 图的布局。[ default: 'none' ]
                        symbol: 'circle',
                        lineStyle: {            // 关系边的公用线条样式。其中 lineStyle.color 支持设置为'source'或者'target'特殊值，此时边会自动取源节点或目标节点的颜色作为自己的颜色。
                            normal: {
                                color: '#000',          // 线的颜色[ default: '#aaa' ]
                                width: 1,               // 线宽[ default: 1 ]
                                type: 'solid',          // 线的类型[ default: solid ]   'dashed'    'dotted'
                                opacity: 0.5,           // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。[ default: 0.5 ]
                                curveness: 0,
                                // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。[ default: 0 ]
                            }
                        },
                        label: {                // 关系对象上的标签
                            normal: {
                                show: true,                 // 是否显示标签
                                position: "top",         // 标签位置:'top''left''right''bottom''inside''insideLeft''insideRight''insideTop''insideBottom''insideTopLeft''insideBottomLeft''insideTopRight''insideBottomRight'
                                textStyle: {                // 文本样式
                                    fontSize: 15
                                }
                            }
                        },
                        // edgeLabel: {                // 连接两个关系对象的线上的标签
                        //   normal: {
                        //     show: true,
                        //     textStyle: {
                        //       fontSize: 10
                        //     },
                        //     formatter: "{c}"
                        //   }
                        // },
                        data: graphdata,
                        categories: [{
                            name: '学科',
                            itemStyle: {
                                normal: {
                                    color: "#4592FF",
                                }
                            }
                        }, {
                            name: '当前搜索学科',
                            itemStyle: {
                                normal: {
                                    color: "#ff0000",
                                }
                            }
                        }, {
                            name: '研究主题',
                            itemStyle: {
                                normal: {
                                    color: "#ff8c40",
                                }
                            }
                        }],
                        links: edgedata,
                    }],

                    animationEasingUpdate: "quinticInOut",          // 数据更新动画的缓动效果。[ default: cubicOut ]    "quinticInOut"
                    animationDurationUpdate: 100                    // 数据更新动画的时长。[ default: 300 ]
                };
                myChart2.hideLoading();
                myChart2.setOption(option);
                myChart2.on('click', function (param) {
                    var name = param.name;
                    top.location.href = "?search=" + name;
                });
            }
        });
    }

    console.log(${mid})


</script>
<#--趋势图-->
<script type="text/javascript">
    var myChart3 = echarts.init(document.getElementById('qushi'));
    myChart3.showLoading();
    var myChart4 = echarts.init(document.getElementById('zhuti'));
    var url4 = '/scidata/paper/echartshow4?subname1=${clfys[0].getClassify_name()}&subname2=${clfys[1].getClassify_name()}&lang=${lang}'+ '&keyName=${mcurname}';
    var subname1;
    var subname2;


    myChart4.showLoading();

    // var name=param.name;
    // url4='/echartshow4?subname='+name;
    // alert(url4);
    // name4=[];
    // dataseri=[];
    $.ajax({
        method: 'get',
        url: url4,
        dataType: 'json',
        success: function (data4) {
            // alert(url4);
            var name4 = [];
            var dataseri = [];
            var time4 = [];

            $("#body  tr:not(:first)").html("");
            time4 = data4[0].time;
            if(lang === 'EN') {
                time4 = ["2018","2019","2020","2021","2022(预测)"]
            }
            pre = 0
            $.each(data4, function (i, obj) {
                name4.push(obj.name);
                var dataS = {};
                dataS.name = obj.name;
                dataS.type = 'line';
                dataS.smooth = true;
                dataS.stack = '总量';
                dataS.areaStyle = {};
                if(lang === 'EN') {
                    dataS.data = obj.value.slice(3,8);
                }else {
                    dataS.data = obj.value;
                }
                // dataS.markPoint = {symbol: 'triangle', symbolSize: 18,data:[{name:"1",xAxis:time4.length-1, yAxis:dataS.data[time4.length-1]+pre}]};
                dataseri.push(dataS);
                pre += dataS.data[time4.length-1]
            });

            var sub = "${mcname}";
            var name = "${clfys[0].classify_name}";
            option4 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: name4,
                    textStyle: { //图例文字的样式
                        color: '#000000',
                        fontSize: 15
                    }
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: time4,
                        axisLabel: {
                            show: true,
                            rotate: 45,
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
                series: dataseri
            };
            var option = myChart4.getOption();
            myChart4.hideLoading();
            myChart4.setOption(option4)
        }

    });
    // console.log(url4);

    $.ajax({
        method: 'get',
        url: '/scidata/paper/echartshow3?lang=${lang}'+ '&keyName=${mcurname}',
        dataType: 'json',
        success: function (data) {
            var category = [];
            var dataser = [];
            $.each(data, function (i, obj) {
                category.push(obj.name);
                $.each(obj.values, function (i, objvalue) {
                    var t = [];
                    t.push(objvalue.dates);
                    t.push(objvalue.c);
                    t.push(obj.name);
                    dataser.push(t);


                    // console.log(t);
                });
            });
            // console.log(category);
            // console.log(dataser);
            option = {
                // animation: false,

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        lineStyle: {
                            color: 'rgba(0,0,0,0.2)',
                            width: 1,
                            type: 'solid'
                        }
                    }
                },

                legend: {
                    // selectedMode:false,
                    data: category,

                    textStyle: { //图例文字的样式
                        color: '#000000',
                        fontSize: 15
                    }
                },

                singleAxis: {
                    top: 50,
                    bottom: 50,
                    axisTick: {},
                    axisLabel: {},
                    type: 'time',
                    axisPointer: {
                        animation: true,
                        label: {
                            show: true
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            opacity: 0.2
                        }
                    }
                },
                color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
                series: [
                    {
                        label: {
                            show: false
                        },
                        type: 'themeRiver',
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 20,
                                shadowColor: 'rgba(0, 0, 0, 0.8)'
                            }
                        },
                        data: dataser,
                    }
                ]
            };
            myChart3.hideLoading();

            myChart3.setOption(option);
            // myChart3.on('axisareaselected', function (params) {
            //   console.log(params);
            //   var series0 = chart.getModel().getSeries()[0];
            //   var series1 = chart.getModel().getSeries()[1];
            //   var indices0 = series0.getRawIndicesByActiveState('active');
            //   var indices1 = series1.getRawIndicesByActiveState('active');
            //
            // });
            myChart3.on('legendselectchanged', function (param) {
                myChart3.setOption({
                    legend: {selected: {[param.name]: true}}
                });
                myChart4.showLoading();

                var name = param.name;
                url4 = '/scidata/paper/echartshow4?subname=' + name + '&lang=${lang}'+ '&keyName=${mcurname}';
                // alert(url4);
                name4 = [];
                // dataseri=[];
                $.ajax({
                    method: 'get',
                    url: url4,
                    dataType: 'json',
                    success: function (data4) {
                        // alert(url4);
                        var name4 = [];
                        var dataseri = [];
                        var time4 = [];

                        $("#body  tr:not(:first)").html("");
                        time4 = data4[0].time;
                        // function sortId(a,b){
                        //   return b.clfy-a.clfy;
                        // }
                        $.each(data4, function (i, obj) {
                            name4.push(obj.name);
                            var dataS = {};
                            dataS.name = obj.name;
                            dataS.type = 'line';
                            dataS.smooth = true;
                            dataS.stack = '总量';
                            dataS.areaStyle = {};
                            dataS.data = obj.value;
                            dataseri.push(dataS);


                            // var TR  = document.createElement("tr");
                            // var tdNum = document.createElement("td");
                            // var tdName = document.createElement("td");
                            // var tdOpr = document.createElement("td");
                            // var tdchange = document.createElement("td");
                            // var tdrankchange = document.createElement("td");
                            // var TR  = document.createElement("tr");
                            // $("#body tbody").empty();

                        });

                        var sub = "${mcname}";
                        document.getElementById("sub2sub").innerHTML = name + "与" + sub + "交叉研究主题";
                        option4 = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross',
                                    label: {
                                        backgroundColor: '#6a7985'
                                    }
                                }
                            },
                            legend: {
                                data: name4,
                                textStyle: { //图例文字的样式
                                    color: '#000000',
                                    fontSize: 15
                                }
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: time4
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
                            series: dataseri
                        };
                        var option = myChart4.getOption();
                        myChart4.hideLoading();
                        myChart4.setOption(option4)
                    }

                });
                // console.log(param);
            });

        }
    });

    function getid1(name) {
        myChart4.showLoading();
        subname1 = name;
        subname2 = document.getElementById("fs2").value;
        url4 = '/scidata/paper/echartshow4?subname1=' + subname1 + '&subname2=' + subname2 + '&lang=${lang}'+ '&keyName=${mcurname}';
        if (subname2 !== name) {
            $.ajax({
                method: 'get',
                url: url4,
                dataType: 'json',
                success: function (data4) {
                    // alert(url4);
                    var name4 = [];
                    var dataseri = [];
                    var time4 = [];

                    $("#body  tr:not(:first)").html("");
                    time4 = data4[0].time;
                    time4 = data4[0].time;
                    if(lang === 'EN') {
                        time4 = ["2018","2019","2020","2021","2022(预测)"]
                    }
                    pre = 0
                    $.each(data4, function (i, obj) {
                        name4.push(obj.name);
                        var dataS = {};
                        dataS.name = obj.name;
                        dataS.type = 'line';
                        dataS.smooth = true;
                        dataS.stack = '总量';
                        dataS.areaStyle = {};
                        if(lang === 'EN') {
                            dataS.data = obj.value.slice(3,8);
                        }else {
                            dataS.data = obj.value;
                        }
                        // dataS.markPoint = {symbol: 'triangle', symbolSize: 18,data:[{name:"1",xAxis:time4.length-1, yAxis:dataS.data[time4.length-1]+pre}]};
                        dataseri.push(dataS);
                        pre += dataS.data[time4.length-1]
                    });

                    var sub = "${mcname}";
                    // document.getElementById("sub2sub").innerHTML=name+"与"+sub+"交叉研究主题";
                    option4 = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: name4,
                            textStyle: { //图例文字的样式
                                color: '#000000',
                                fontSize: 15
                            }
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                axisLabel: {
                                    show: true,
                                    rotate: 45,
                                },
                                data: time4
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
                        series: dataseri
                    };
                    var option = myChart4.getOption();
                    myChart4.hideLoading();
                    myChart4.setOption(option4)
                }

            });
        }
    }

    function getid2(name) {
        myChart4.showLoading()
        subname2 = name;
        subname1 = document.getElementById("fs1").value;
        url4 = '/scidata/paper/echartshow4?subname1=' + subname1 + '&subname2=' + subname2+ '&lang=${lang}'+ '&keyName=${mcurname}';
        if (subname1 !== name) {
            $.ajax({
                method: 'get',
                url: url4,
                dataType: 'json',
                success: function (data4) {
                    // alert(url4);
                    var name4 = [];
                    var dataseri = [];
                    var time4 = [];

                    $("#body  tr:not(:first)").html("");
                    time4 = data4[0].time;
                    if(lang === 'EN') {
                        time4 = ["2018","2019","2020","2021","2022(预测)"]
                    }
                    pre = 0
                    $.each(data4, function (i, obj) {
                        name4.push(obj.name);
                        var dataS = {};
                        dataS.name = obj.name;
                        dataS.type = 'line';
                        dataS.smooth = true;
                        dataS.stack = '总量';
                        dataS.areaStyle = {};
                        if(lang === 'EN') {
                            dataS.data = obj.value.slice(3,8);
                        }else {
                            dataS.data = obj.value;
                        }
                        // dataS.markPoint = {symbol: 'triangle', symbolSize: 18,data:[{name:"1",xAxis:time4.length-1, yAxis:dataS.data[time4.length-1]+pre}]};
                        dataseri.push(dataS);
                        pre += dataS.data[time4.length-1]
                    });

                    var sub = "${mcname}";
                    // document.getElementById("sub2sub").innerHTML=name+"与"+sub+"交叉研究主题";
                    option4 = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: name4,
                            textStyle: { //图例文字的样式
                                color: '#000000',
                                fontSize: 15
                            }
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: time4,
                                axisLabel: {
                                    show: true,
                                    rotate: 45,
                                },
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
                        series: dataseri
                    };
                    var option = myChart4.getOption();
                    myChart4.hideLoading();
                    myChart4.setOption(option4)
                }

            });
        }
    }
</script>
<#--基金列表-->
<script type="text/javascript">
    //定义全局变量，总记录数
    // var totalRecord,currentPage;
    //页面加载完成以后，直接去发送ajax请求，要到分页数据
    $(function () {
        //页面加载完默认进首页
        to_page(1);
    });

    //点击页面时，实现页码跳转
    function to_page(pn) {
        $.ajax({
            url: fundurl + pn,
            type: "get",
            success: function (result) {
                build_emps_table(result);
                build_page_info(result);
                build_page_nav(result);
            }
        });
    }

    function build_emps_table(result) {
        $("#fundtable tbody").empty();
        var emps = result.list;
        $.each(emps, function (index, item) {
            var empIdTd = $("<td style='font-size: small'></td>").append(result.startRow + index);
            var empNameTd = $("<td style='font-size: small'></td>").append(item.title);
            var genderTd = $("<td style='font-size: small'></td>").append(item.number);
            var emailTd = $("<td style='font-size: small'></td>").append(item.money + '万元');
            var emailty = $("<td style='font-size: small'></td>").append('（国家自然科学基金）' + item.type);
            var startTd = $("<td style='font-size: small'></td>").append(item.starttime);
            var endTd = $("<td style='font-size: small'></td>").append(item.endtime);

            $("<tr></tr>").append(empIdTd).append(empNameTd)
                .append(genderTd)
                .append(emailTd)
                .append(emailty)
                .append(startTd)
                .append(endTd)
                .appendTo("#fundtable tbody");
        });
    }

    //解析显示分页信息
    function build_page_info(result) {
        //清空分页信息
        // $("#page_info_area").empty();
        // var h=$("<h5></h5>").append("当前"+result.pageNum+"页，总"+
        //     result.pages+"页，总"+
        //     result.total+"条记录");
        // $("#page_info_area").append(h);
        totalRecord = result.total;
        currentPage = result.pageNum;
    }

    //解析显示分页条
    function build_page_nav(result) {
        //清空分页导航
        $("#fundpage_nav_area").empty();
        //创建ul
        var ul = $("<ul></ul>").addClass("pagination");
        //首页
        // var firstPageLi=$("<li></li>").append($("<a class=\"page-link\"></a>").append("首页").attr("href","#")).addClass("page-item");
        //前一页
        var prePageLi;
        prePageLi = $("<li></li>").append($("<a aria-label=\"Previous\"></a>").append($("<span aria-hidden=\"true\"></span>").append('<i class="fa fa-arrow-circle-left"></i>').append('上一页')));
        //如果没有了前一页，首页和前一页按钮不可用
        if (result.hasPreviousPage === false) {
            prePageLi = $("<li></li>").append($("<a aria-label=\"Previous\"></a>").append($("<span aria-hidden=\"false\"></span>").append('<i class="fa fa-arrow-circle-left"></i>').append('上一页')));

        }
        //为元素添加点击翻页事件
        //首页单击事件
        // firstPageLi.click(function(){
        //     to_page(1);
        // });
        //上一页单击事件:当前页-1
        prePageLi.click(function () {
            to_page(result.pageNum - 1);
        });

        //后一页
        var nextPageLi
        nextPageLi = $("<li></li>").append($("<a aria-label=\"Previous\"></a>").append($("<span aria-hidden=\"true\"></span>").append('<i class="fa fa-arrow-circle-right"></i>').append('下一页')));
        //末页
        // var lastPageLi=$("<li></li>").append($("<a class=\"page-link\"></a>").append("末页").attr("href","#")).addClass("page-item");
        //如果没有了下一页，末页和下一页按钮不可用
        if (result.hasNextPage === false) {
            nextPageLi = $("<li></li>").append($("<a aria-label=\"Previous\"></a>").append($("<span aria-hidden=\"false\"></span>").append('<i class="fa fa-arrow-circle-right"></i>').append('下一页')));
        }
        //下一页的单击事件：当前页+1
        nextPageLi.click(function () {
            to_page(result.pageNum + 1);
        });
        // lastPageLi.click(function(){
        //     to_page(result.pages);
        // });


        //添加首页和前一页的提示
        ul.append(prePageLi);
        //循环遍历给ul中添加页码提示，取出页码号 1,2,3,4,5，
        $.each(result.navigatepageNums, function (index, item) {
            var numLi = $("<li></li>").append($("<a></a>").append(item).append('<span class="sr-only">(current)</span>'));
            //如果当前页码等于正在循环遍历的页码，则页码变色
            if (result.pageNum === item) {
                numLi.addClass("active");
            } else {
                numLi.addClass("enabled");
            }
            //给页码添加单击事件
            numLi.click(function () {
                to_page(item);
            });
            ul.append(numLi);
        });
        //添加下一页和末页的提示
        ul.append(nextPageLi);
        //创建nav,将ul标签添加到nav标签中
        // var nav=$("<nav aria-label=\"Page navigation example\"></nav>").append(ul);
        //将分页条添加到上面id中
        ul.appendTo("#fundpage_nav_area");
    }

</script>
<#--论文列表-->
<script type="text/javascript">
    (function($) {
        /*
         * 使用方法：1. $("you Dom ClassName or ID").overTexts({ texts:"you need overhide text...." });//这种的初始的，不带参数的，默认参数是 20字长 且显示展开和收起的
         * texts: "测试文本...此处省略200字...测试文本",
         * textLength: "20", //你需要定义超过多少字，就显示收起
         * overText: "展开",  //你需要设置的默认名称，展开 显示
         * openText: "收起",  //你需要设置的默认名称，收起 收缩
         * ooType: "2" //展开和收缩的类型， 0 不显示展开和收缩，仅为省略号 || 1 显示展开，不显示收缩 ||2 显示展开和收缩 || 3显示省略号
         *
         * */
        $.fn.overTexts = function(options) {
            var ooText,t1;
            var dft = {
                //初始化的参数配置
                texts: "展开和收缩的类型， 0 不显示展开和收缩，仅为省略号 || 1 显示展开，不显示收缩 ||2 显示展开和收缩",
                textLength: "40",
                overText: "展开",
                openText: "收起",
                ooType: "2" //展开和收缩的类型， 0 不显示展开和收缩，仅为省略号 || 1 显示展开，不显示收缩 ||2 显示展开和收缩 || 3显示省略号
            }
            var opt = $.extend(dft, options);
            ooText = opt.texts;			//临时装载 数据 用于填充到data-text内的
            if (options.ooType == '0') {
                $(this).html("<div class='moreText' data-text="+opt.texts+">" + opt.texts + "</div>");
            }
            if (options.ooType == '1') {
                ooText = opt.texts;
                if (opt.texts.length > opt.textLength) {
                    t1 = opt.texts.substring(0, opt.textLength) + "<a class='moreoh'   >"+opt.overText+"</a>";
                }else{
                    t1 = opt.texts;
                }
                $(this).html("<div class='moreText' data-text="+ooText+">" + t1 + "</div>");
            }
            if (options.ooType == '2') {
                if (opt.texts.length > opt.textLength) {
                    t1 = opt.texts.substring(0, opt.textLength) +'...'+ "<a class='moreoh' >"+opt.overText+"</a>";
                }else{
                    t1 = opt.texts;
                }

            }
            if (options.ooType == '3') {
                if (opt.texts.length > opt.textLength) {
                    t1 = opt.texts.substring(0, opt.textLength) + "...";
                }else{
                    t1 = opt.texts;
                }

            }
            //无论何种结果，均执行此
            $(this).html("<div class='moreText' data-text="+ooText+">" + t1 + "</div>");
            //此处判断 就是 已经有展开或者收起了
            if($(this).find("a").hasClass("moreoh")){
                //事件委托，让他可以执行
                $(".moreText").on("click","a.moreoh",function(){//更多或者收起的点击事件
                    var moreoh = $(this).find("a.moreoh");//我是更多或者收起的dom
                    if(moreoh.context.innerText== opt.overText){//如果我此时是展开
                        if(opt.ooType==2){
                            t1 = opt.texts+ "<a class='moreoh' >"+opt.openText+"</a>";
                            moreoh.context.innerText = opt.openText;
                            $(this).parents(".moreText").html(t1);
                        }else{
                            t1=opt.texts;
                            $(this).parents(".moreText").html(t1);
                        }

                    }
                    if(moreoh.context.innerText== opt.openText){//如果我此时是收起
                        t1 = opt.texts.substring(0, opt.textLength) + '...'+"<a class='moreoh'    >"+opt.overText+"</a>";
                        moreoh.context.innerText = opt.overText;
                        $(this).parents(".moreText").html(t1);
                    }
                });
            }

        }
    })(jQuery);
    <#--var startsub=${curname};-->

    var sort = 'zonghe'
    var lang = '${lang}'

    var paperurl = "/scidata/paper/paperlist?search=${mcurname}&subclf=${clfys[0].getId()}&pageNum=";
    //console.log(paperurl);
    var fundurl = "/scidata/paper/fundlist?search=${mcurname}&subclf=${clfys[0].getId()}&pageNum=";
    //console.log(paperurl);
    var newsurl = "/scidata/paper/newslist?search=${mid}&subclf=${curid}&pageNum=";
    //console.log(paperurl);
    var totalRecord1, currentPage1;
    var totalRecord, currentPage;
    var totalRecord2, currentPage2;
    function search(param) {
        lang = param;
        var v = document.getElementById("searchword");
        var Keyword = v.value;
        // console.log(v)
        if (Keyword.length>=10) {
            alert('输入关键词长度不能大于10');
            return false;
        }
        if (Keyword.trim() == '' || Keyword==null) {
            alert('输入关键词不能为空');
            return false;
        }
        location.href = "/scidata/paper?search=" + v.value + "&lang="+ lang;
        // document.getElementById("searchword").innerHTML = "iji";
    }
    function changeLang(param) {
        lang = param
        var v = document.getElementById("searchword");
        var word = v.placeholder
        console.log(word)
        location.href = "/scidata/paper?search=" + word + "&lang="+ lang;
        // search(lang)
        // $('#subbar button').each(function (i) {
        //     // console.log($(this).attr('class'));// 遍历 tr
        //     if ($(this).attr('class') === 'btn btn-primary') {
        //         $(this).addClass('btn-default')
        //     }
        // });
        // document.getElementById(param).setAttribute("class", "btn btn-primary");



        // document.getElementById(sort).setAttribute('selected','selected')
        // to_page1(1)
    }
    function filterSort(param) {
        let index = param.selectedIndex
        sort = param.options[index].value
        document.getElementById(sort).setAttribute('selected','selected')
        to_page1(1)
    }

    function geturl(name, a) {
        document.getElementById('subject').innerHTML = name;
        paperurl = "/scidata/paper/paperlist?search=${mcurname}&subclf=" + a + "&pageNum=";
        fundurl = "/scidata/paper/fundlist?search=${mcurname}&subclf=" + a + "&pageNum=";
        newsurl = "/scidata/paper/newslist?search=${mid}&subclf=" + a + "&pageNum=";



        $('#subbar button').each(function (i) {
            // console.log($(this).attr('class'));// 遍历 tr
            if ($(this).attr('class') === 'btn btn-primary') {
                $(this).addClass('btn btn-primary btn-link')
            }
        });
        // var name=name;
        var clfnam = document.getElementById(a).innerHTML;
        // document.getElementById("cardsub").innerHTML = clfnam;
        document.getElementById(a).setAttribute("class", "btn btn-primary");
        // console.log(paperurl);
        to_page1(1);
        to_page(1);
        // to_page2(1)
        getRelation(a)
    }

    //定义全局变量，总记录数

    sort = 'zonghe'
    //页面加载完成以后，直接去发送ajax请求，要到分页数据
    $(function () {
        //页面加载完默认进首页
        to_page1(1);
    });
    //点击页面时，实现页码跳转
    // console.log(paperurl);
    function to_page1(pn) {
        $.ajax({
            url: paperurl + pn + "&sort="+sort + '&lang=${lang}',
            // data:"pn="+pn,//pn是用户指定跳转的页码数
            type: "get",
            success: function (result) {
                //console.log(result);//需要在浏览器的控制台中查看
                //1.解析并显示员工数据
                build_emps_table1(result);
                add_abstract(result);
                //2.解析并显示分页信息
                build_page_info1(result);
                //3.解析显示分页条
                build_page_nav1(result);

            }
        });
    }

    function build_emps_table1(result) {
        //清空table表格
        // $("#papertable div").empty();
        $("#papertable").empty();
        //获取json串中返回的结果集（库表中的数据）
        var emps = result.list;
        //循环遍历结果集==>循环遍历所有员工数据
        //参数1：要遍历的emps集合，参数2:每次遍历的回调函数
        //回调函数：参数1：索引，参数2：当前对象
        $.each(emps, function (index, item) {
            //alert(item.empName);
            //把解析的数据放到表格中展示，以下的DOM解析表格
            var singlediv = $("<div class = 'panel panel-default'>")
            // var empIdTd=$("<td></td>").append(result.startRow+index);
            var nametmp = $("<a></a>").append('<i class="fa fa-pencil-square-o"></i>').append(item.title)

            var empNameTd = $("<div class='article-heading-abb'></div>").append(nametmp)
            singlediv.append(empNameTd)

            //var gender=item.gender=='M'?"男":"女";
            var authortd = $("<div class='art-date'></div>").append("作者:"+item.author);
            var keywordtd = $("<div class='art-date'></div>").append("关键词:"+item.keywords);
            var timetd = $("<div class='art-date'></div>").append("时间:"+item.time.substr(0, 4));
            var quotetd = $("<div class='art-date'></div>").append("被引量:"+item.quote);

            $("<div class='article-info'></div>")
                .append(authortd)
                .append(keywordtd)
                .append(timetd)
                .append(quotetd)
                .appendTo(singlediv);

            var abstract_div_id = String("abstract"+index)
            console.log(abstract_div_id)
            var abstract = document.createElement("div")
            abstract.id = "abstract"+index
            abstract.className = 'article-content'
            // var abstracttext = item.abstract;
            // abstract.overTexts({
            //     texts: abstracttext,
            //     textLength: "50",
            //     overText: "展开",
            //     openText: "收起",
            //     ooType: "2"
            // });
                // .append($('<p class="block-with-text"></p>').append('配电网健康指数理论通过计算配电网中评价对象的健康指数,进而评价其健康状态,为配电网资产管理、规划、检修和运行等提供参考。由于配电网健康指数理论的应用需要大量的专家知识作为支撑,因此需要对大量的专家知识进行合理有效的管理和使用,而专家系统作为一个智能计算机程序系统,可以实现对专家经验的管理和使用,文章研究表明,基于专家经验的配电设备专家信息系统,可以很好的得出配电设备的健康状态。'))
            singlediv.append(abstract)
            singlediv.appendTo('#papertable')

        });
    }
    function add_abstract(result) {
        //清空table表格
        // $("#papertable div").empty();
        //获取json串中返回的结果集（库表中的数据）
        var emps = result.list;
        //循环遍历结果集==>循环遍历所有员工数据
        //参数1：要遍历的emps集合，参数2:每次遍历的回调函数
        //回调函数：参数1：索引，参数2：当前对象
        $.each(emps, function (index, item) {
            //alert(item.empName);
            //把解析的数据放到表格中展示，以下的DOM解析表格

            var abstract_div_id = String("#abstract"+index)
            console.log(abstract_div_id)
            var abstract = document.createElement("div")
            abstract.id = "abstract"+index
            abstract.className = 'article-content'
            var abstracttext = item.abstract;
            $(abstract_div_id).overTexts({
                texts: abstracttext,
                textLength: "300",
                overText: "展开",
                openText: "收起",
                ooType: "2"
            });
            // .append($('<p class="block-with-text"></p>').append('配电网健康指数理论通过计算配电网中评价对象的健康指数,进而评价其健康状态,为配电网资产管理、规划、检修和运行等提供参考。由于配电网健康指数理论的应用需要大量的专家知识作为支撑,因此需要对大量的专家知识进行合理有效的管理和使用,而专家系统作为一个智能计算机程序系统,可以实现对专家经验的管理和使用,文章研究表明,基于专家经验的配电设备专家信息系统,可以很好的得出配电设备的健康状态。'))

        });
    }

    //解析显示分页信息
    function build_page_info1(result) {
        //清空分页信息
        // $("#page_info_area").empty();
        // var h=$("<h5></h5>").append("当前"+result.pageNum+"页，总"+
        //     result.pages+"页，总"+
        //     result.total+"条记录");
        // $("#page_info_area").append(h);
        totalRecord = result.total;
        currentPage = result.pageNum;
    }

    //解析显示分页条
    function build_page_nav1(result) {
        //清空分页导航
        $("#page_nav_area").empty();

        //创建ul
        var ul = $("<ul></ul>").addClass("pagination");
        //首页
        // var firstPageLi=$("<li></li>").append($("<a class=\"page-link\"></a>").append("首页").attr("href","#")).addClass("page-item");
        //前一页
        var prePageLi;
        prePageLi = $("<li></li>").append($("<a aria-label=\"Previous\"></a>").append($("<span aria-hidden=\"true\"></span>").append('<i class="fa fa-arrow-circle-left"></i>').append('上一页')));
        //如果没有了前一页，首页和前一页按钮不可用
        if (result.hasPreviousPage === false) {
            prePageLi = $("<li></li>").append($("<a aria-label=\"Previous\"></a>").append($("<span aria-hidden=\"false\"></span>").append('<i class="fa fa-arrow-circle-left"></i>').append('上一页')));

        }
        prePageLi.click(function () {
            to_page1(result.pageNum - 1);
        });

        //后一页
        var nextPageLi
        nextPageLi = $("<li></li>").append($("<a aria-label=\"Previous\"></a>").append($("<span aria-hidden=\"true\"></span>").append('<i class="fa fa-arrow-circle-right"></i>').append('下一页')));
        if (result.hasNextPage === false) {
            nextPageLi = $("<li></li>").append($("<a aria-label=\"Previous\"></a>").append($("<span aria-hidden=\"false\"></span>").append('<i class="fa fa-arrow-circle-right"></i>').append('下一页')));
        }
        //下一页的单击事件：当前页+1
        nextPageLi.click(function () {
            to_page1(result.pageNum + 1);
        });
        // lastPageLi.click(function(){
        //     to_page1(result.pages);
        // });


        //添加首页和前一页的提示
        ul.append(prePageLi);
        //循环遍历给ul中添加页码提示，取出页码号 1,2,3,4,5，
        $.each(result.navigatepageNums, function (index, item) {
            var numLi = $("<li></li>").append($("<a></a>").append(item).append('<span class="sr-only">(current)</span>'));
            //如果当前页码等于正在循环遍历的页码，则页码变色
            if (result.pageNum === item) {
                numLi.addClass("active");
            } else {
                numLi.addClass("enabled");
            }
            //给页码添加单击事件
            numLi.click(function () {
                to_page1(item);
            });
            ul.append(numLi);
        });
        //添加下一页和末页的提示
        ul.append(nextPageLi);
        //创建nav,将ul标签添加到nav标签中
        // var nav=$("<nav aria-label=\"Page navigation example\"></nav>").append(ul);
        //将分页条添加到上面id中
        ul.appendTo("#page_nav_area");
    }

</script>
<script src="js/main.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src='js/jquery.okayNav.js'></script>
</body>

</html>